<template>
    
        <v-app-bar height="64" color="primary" :elevation="appbarShadow" clipped-left app dark>
          <v-app-bar-nav-icon @click.stop="toggle()"></v-app-bar-nav-icon>
            <!-- <v-toolbar-title>
                <v-avatar tile>
                    <v-icon size="40" style="transform: rotate(180deg)">mdi-android-auto</v-icon>
                </v-avatar> Vuetify-Admin
            </v-toolbar-title> -->
            <v-spacer></v-spacer>
            <v-toolbar-items>
                <v-btn class="d-md-flex d-none" @click="fullscreen" text>
                    <v-icon v-text="fullscreenIcon"></v-icon>
                </v-btn>
                <v-btn icon @click.stop="$vuetify.theme.dark = !$vuetify.theme.dark">
                  <v-icon>mdi-theme-light-dark</v-icon>
                </v-btn>
                <v-btn @click="setting" text>
                    <v-icon>mdi-palette</v-icon>
                </v-btn>
            </v-toolbar-items>
        </v-app-bar>
        
</template>

<script>
// 全屏插件
import screenfull from "screenfull";

export default {
  name: "Home",
  data() {
    return {
      // setting: false,
      appbarShadow: 4,
        fullscreenIcon: "mdi-fullscreen",
    };
  },
  mounted() {
  },
  computed: {
    dark() {
      return this.$vuetify.theme.dark;
    },
    primarySet: {
      get: function() {
        return this.$vuetify.theme.dark
          ? this.$vuetify.theme.themes.dark.primary
          : this.$vuetify.theme.themes.light.primary;
      },
      set: function(newValue) {
        if (this.$vuetify.theme.dark) {
          this.$vuetify.theme.themes.dark.primary = newValue;
        } else {
          this.$vuetify.theme.themes.light.primary = newValue;
          
        }
      }
    },
    secondarySet: {
      get: function() {
        return this.$vuetify.theme.dark
          ? this.$vuetify.theme.themes.dark.secondary
          : this.$vuetify.theme.themes.light.secondary;
      },
      set: function(newValue) {
        if (this.$vuetify.theme.dark) {
          this.$vuetify.theme.themes.dark.secondary = newValue;
        } else {
          this.$vuetify.theme.themes.light.secondary = newValue;
        }
      }
    }
  },
  methods: {
    setting () {
      this.$emit("change");
    },
    toggle() {
      this.$emit("set_nav");
    },
    fullscreen() {
      this.fullscreenIcon = screenfull.isFullscreen
        ? "mdi-fullscreen"
        : "mdi-fullscreen-exit";
      screenfull.toggle();
    },
  },
  watch: {
    dark(val) {
      localStorage.setItem("dark", val);
    }
  }
};
</script>